<template>
  <div class="about">
    <router-link to="/about/sports">体育</router-link> |
    <router-link to="/about/caijing">财经</router-link> |
    <router-link to="/about/car">汽车</router-link>
    <hr>
    <transition mode="out-in" name="side">
      <keep-alive>
        <!-- 盛放匹配路由的组件 -->
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<style scoped>
a{
   font-weight: bold;
    color: #2c3e50;
}
/* 高亮 */
    .router-link-exact-active {
      color: #42b983;
    }
  
/* 进场和出场期间动画 */
.v-enter-active,
.v-leave-active {
  transition: all 0s;
}

/* 进场时 */
.v-enter,
.v-leave-to {
  opacity: 0;
}

/* 出场时 */
.v-leave,
.v-enter-to {
  opacity: 1;
}

/* 上面进来，下面出去 */
.side-enter {
  transform: translate3d(0, -100%, 0);
}

.side-enter-to,
.side-leave {
  transform: translate3d(0, 0, 0);
}

.side-leave-to {
  transform: translate3d(0, 100%, 0);
}

.side-enter-active,
.side-leave-active {
  transition: all 0.4s linear;
}
/* 进度条 */
#nprogress .bar {
  background: red !important;
}
</style>
